<script setup lang="ts">
import { ref } from 'vue'

// 1. 定义基本类型
const num = ref(10)
// 代码中如果要修改数据 需要通过.value
const changeNum = () => {
  num.value++
}

// 2. 定义复杂类型
const foods = ref(['鸡', '鸭', '鱼'])
const changeFoods = () => {
  foods.value.unshift('肉')
}
</script>

<!-- 结构 -->
<template>
  <!-- ref 定义的数据在 UI 界面中使用或修改不需要写.value -->
  <h1 @click="changeNum">num:{{ num }}</h1>
  <h1 @click="changeFoods">foods:{{ foods }}</h1>
  <button @click="foods.push('花菜')">修改数据</button>
</template>

<!-- 样式 -->
<style scoped></style>
